<template>
  <el-row v-if="type_flag=='wood'" class="agency-list">
    <div
      class="item"
      v-for="(item,index) in agencyList"
      :key="index"
      @click="agencyDetail(item.id,item.is_deposit)"
    >
      <div class="box">
        <div class="imgBox">
          <img
            class="goods-img"
            :src="item.img_path ? img_api + item.img_path  : require('@/assets/hall/mall_default.jpg')"
            alt
          />
          <div class="icon-lock" v-show="item.is_password == 1">
            <img src="../../../assets/hall/ds2.png" alt />
          </div>
          <div
            class="agency-state"
            v-show=" item.product_stats == 0 || item.product_stats == 1 || item.product_stats == 3"
            :class="{'dlym':item.product_stats == 3}"
          >
            <span v-show="item.product_stats == 3" class="dlym-text">代理已满</span>
            <span v-show="item.product_stats == 0 || item.product_stats == 1">代理即将开始：</span>
            <Countdown
              v-if="item.product_stats == 0 || item.product_stats == 1 && countdownFlag && item.open_time_left > 0"
              :endTime="item.open_time_left"
              :callback="countdownCallback"
              :endText="endText"
            ></Countdown>
          </div>
          <div class="agency-count" :class="{'count-dlym':item.product_stats == 3}">
            <span class="icon"></span>
            <span class="count">{{item.count}}人</span>
          </div>
        </div>
        <el-row class="info-wrapper" :class="{'info-dlym' : item.product_stats == 3}">
          <!-- 名称展示 -->
          <div class="name">
            <i class="label-category" v-show="item.attr_area_name">{{item.attr_area_name}}</i>
            <span v-if="item.title" class="product-name" :title="item.title">{{item.title}}</span>
            <span
              v-else-if="item.attr_woodname_name && item.attr_place_name"
              class="product-name"
              :title="item.attr_woodname_name + '/' + item.attr_place_name"
            >{{item.attr_woodname_name + '/' + item.attr_place_name}}</span>
            <span
              v-else
              class="product-name"
              :title="item.attr_woodname_name || item.attr_place_name"
            >{{item.attr_woodname_name || item.attr_place_name}}</span>

            <!-- 是否有定金 -->
            <span
              class="type"
              :class="{'deposit':item.is_deposit == 1}"
            >{{item.is_deposit == 1 ? '有订金' : '无订金'}}</span>
          </div>
          <div class="info">
            <span class="title">总价值：</span>
            <span class="text highlight">
              ￥
              <span class="count">{{item.total_value}}</span>
            </span>
          </div>
          <div class="info">
            <span class="title">总代理订金：</span>
            <span
              class="text"
              v-if="item.total_deposit && item.total_deposit != '0.00'"
            >￥{{item.total_deposit}}</span>
            <span class="text" v-else>- -</span>
          </div>
          <el-row class="parameter">
            <el-col :xs="24" :sm="24" :lg="8">
              <p
                v-if="item.payment_mode == 'FLEXIBLE'"
              >{{item.agency_stage+'~'+item.agency_stage_max +'个月'}}</p>
              <p v-else>{{item.agency_stage == 0 ? '无限期' : item.agency_stage + '个月'}}</p>

              <p class="title">代理期限</p>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
              <p>{{item.agency_rate ? (item.agency_rate * 100).toFixed(4) + '%' : '-'}}</p>
              <p class="title">代理费率</p>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
              <!-- <p>{{Math.ceil((item.rate * 100)) + '%'}}</p> -->
              <p>{{(item.scale * 100).toFixed(2) + '%'}}</p>
              <p class="title">当前进度</p>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="newcom">
              <span
                class="shop-newtype"
                :class="item.shop_type ==  1 ? 'shop-newtype2' : 'shop-newtype1'"
              >{{item.shop_type == 1 ? '专营店' : '旗舰店'}}</span>
              <a
                class="layui-elip ml-store-link"
                href="javascript:;"
                :title="item.storesname"
              >{{item.storesname}}</a>
            </el-col>
          </el-row>
        </el-row>
      </div>
    </div>
    <div class="no-data" v-show="agencyList.length == 0">
      <img src="@/assets/hall/not_goods_03.png" alt="">
      <span>更多代理商品正在准备中</span>
    </div>
  </el-row>

  <!-- 家具列表 -->
  <el-row v-else class="agency-list">
    <div
      class="item"
      v-for="(item,index) in furnitureList"
      :key="index"
      @click="agencyDetail(item.id,item.is_deposit)"
    >
      <div class="box">
        <div class="imgBox">
          <img
            class="goods-img"
            :src="item.img_path ? img_api + item.img_path  : require('@/assets/hall/mall_default.jpg')"
            alt
          />
          <div class="icon-lock" v-show="item.is_password == 1">
            <img src="../../../assets/hall/ds2.png" alt />
          </div>
          <div
            class="agency-state"
            v-show=" item.product_stats == 0 || item.product_stats == 1 || item.product_stats == 3"
            :class="{'dlym':item.product_stats == 3}"
          >
            <span v-show="item.product_stats == 3" class="dlym-text">代理已满</span>
            <span v-show="item.product_stats == 0 || item.product_stats == 1">代理即将开始：</span>
            <Countdown
              v-if="item.product_stats == 0 || item.product_stats == 1 && countdownFlag && item.open_time_left > 0"
              :endTime="item.open_time_left"
              :callback="countdownCallback"
              :endText="endText"
            ></Countdown>
          </div>
          <div class="agency-count" :class="{'count-dlym':item.product_stats == 3}">
            <span class="icon"></span>
            <span class="count">{{item.count}}人</span>
          </div>
        </div>
        <el-row class="info-wrapper" :class="{'info-dlym' : item.product_stats == 3}">
          <!-- 名称展示 -->
          <div class="name">
            <i class="label-category" v-show="item.attr_furniturecategory_name">{{item.attr_furniturecategory_name}}</i>
            <span v-if="item.title" class="product-name" :title="item.title">{{item.title}}</span>
            <span
              v-else-if="item.attr_material_name && item.attr_furniturecategory_name"
              class="product-name"
              :title="item.attr_material_name + '/' + item.attr_furniturecategory_name"
            >{{item.attr_material_name + '/' + item.attr_furniturecategory_name}}</span>
            <span
              v-else
              class="product-name"
              :title="item.attr_material_name || item.attr_furniturecategory_name"
            >{{item.attr_material_name || item.attr_furniturecategory_name}}</span>

            <!-- 是否有定金 -->
            <span
              class="type"
              :class="{'deposit':item.is_deposit == 1}"
            >{{item.is_deposit == 1 ? '有订金' : '无订金'}}</span>
          </div>
          <div class="info">
            <span class="title">总价值：</span>
            <span class="text highlight">
              ￥
              <span class="count">{{item.total_value}}</span>
            </span>
          </div>
          <div class="info">
            <span class="title">总代理订金：</span>
            <span
              class="text"
              v-if="item.total_deposit && item.total_deposit != '0.00'"
            >￥{{item.total_deposit}}</span>
            <span class="text" v-else>- -</span>
          </div>
          <el-row class="parameter">
            <el-col :xs="24" :sm="24" :lg="8">
              <p
                v-if="item.payment_mode == 'FLEXIBLE'"
              >{{item.agency_stage+'~'+item.agency_stage_max +'个月'}}</p>
              <p v-else>{{item.agency_stage == 0 ? '无限期' : item.agency_stage + '个月'}}</p>

              <p class="title">代理期限</p>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
              <p>{{item.agency_rate ? (item.agency_rate * 100).toFixed(4) + '%' : '-'}}</p>
              <p class="title">代理费率</p>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
              <!-- <p>{{Math.ceil((item.rate * 100)) + '%'}}</p> -->
              <p>{{(item.scale * 100).toFixed(2) + '%'}}</p>
              <p class="title">当前进度</p>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="newcom">
              <span
                class="shop-newtype"
                :class="item.shop_type ==  1 ? 'shop-newtype2' : 'shop-newtype1'"
              >{{item.shop_type == 1 ? '专营店' : '旗舰店'}}</span>
              <a
                class="layui-elip ml-store-link"
                href="javascript:;"
                :title="item.storesname"
              >{{item.storesname}}</a>
            </el-col>
          </el-row>
        </el-row>
      </div>
    </div>
    <div class="no-data" v-show="furnitureList.length <= 0">
      <img src="@/assets/hall/not_goods_03.png" alt="">
      <span>更多代理商品正在准备中</span>
    </div>
  </el-row>
</template>
<script>
import Countdown from "./count-down";
import api from "@/api/agencyProduct";
export default {
  props: {
    agencyList: {
      type: Array,
    },
    furnitureList: {
      type: Array,
    },
    type_flag: {
      type: String,
    },
  },
  components: {
    Countdown,
  },
  data() {
    return {
      countdownFlag: true,
      endText: "已开始",
      img_api: api.IMG_URL,
    };
  },
  watch: {
    agencyList: function (newVal) {
      this.countdownFlag = false;
      this.$nextTick(() => {
        this.countdownFlag = true;
      });
    },
    furnitureList: function (newVal) {
      this.countdownFlag = false;
      this.$nextTick(() => {
        this.countdownFlag = true;
      });
    },
  },
  methods: {
    countdownCallback() {
      return;
    },
    agencyDetail(id, is_deposit) {
      console.log(id, is_deposit);
      // var is_deposit = this.agencyList[index].is_deposit;
      if (is_deposit == 1) {
        this.$router.push({
          name: "agencydetail",
          params: { id: id },
        });
      } else if (is_deposit == 0) {
        this.$router.push({
          name: "agencynodetail",
          params: { id: id },
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.agency-list {
  font-size: 0;
  .item {
    display: inline-block;
    font-size: 12px;
    min-width: 20%;
    width: 20%;
    margin-bottom: 18px;
    cursor: pointer;
    padding: 0 2%;
    border: 1px solid transparent;
    box-sizing: border-box;
    .box {
      background: #fff;
      border: 1px solid #ebf0f2;
      &:hover {
        border: 1px solid #ff3e1e;
        .imgBox {
          .goods-img {
            transform: scale(1.1);
          }
        }
      }
    }
    .imgBox {
      width: 100%;
      padding-top: 72%;
      position: relative;
      overflow: hidden;
      .goods-img {
        transition: all 0.3s;
      }
      .agency-state {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        opacity: 0.8;
        text-align: center;
        font-size: 14px;
        color: #fff;
        background: rgba(255, 103, 21, 0.75);
        .countdown-wrap {
          display: inline-block;
          font-size: 14px;
        }
        &.dlym {
          width: 100%;
          height: 100%;
          background: rgba(157, 147, 144, 0.68);
          .dlym-text {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            background: linear-gradient(
              90deg,
              rgba(17, 17, 17, 0.4),
              rgba(76, 76, 76, 0.4)
            );
          }
        }
      }
      .agency-count {
        position: absolute;
        left: 16px;
        top: 7px;
        padding: 0 13px;
        height: 24px;
        line-height: 24px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.6);
        text-align: center;
        font-size: 12px;
        color: #333;
        &.count-dlym {
          opacity: 0.6;
          color: #666;
        }
        .icon {
          display: inline-block;
          width: 10px;
          height: 12px;
          background: url("../../../assets/hall/icon-person.png") no-repeat 0 0 /
            100% 100%;
          margin-bottom: -1px;
          margin-right: 6px;
        }
      }
      .icon-lock {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(40, 18, 11, 0.68);
        top: 0;
        left: 0;
        img {
          width: 40px;
          height: 52px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        // background: url("../../../assets/hall/icon-lock.png") no-repeat 0 0 /
        //   100% 100%;
      }
      img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }
    .newcom {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #333;
    }
    .agency-btn {
      width: 60px;
      height: 20px;
      padding: 0;
      font-size: 12px;
    }
    .info-wrapper {
      padding: 0 10px;
      &.info-dlym {
        opacity: 0.8;
      }
      .name {
        margin: 14px 0;
        display: flex;
        .product-name {
          flex: 1;
          height: 22px;
          line-height: 22px;
          font-size: 16px;
          font-weight: bold;
          vertical-align: top;
          color: #333;
          width: 0;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .type {
          flex: 0 0 50px;
          width: 50px;
          height: 22px;
          line-height: 22px;
          border: 1px solid #cccccc;
          border-radius: 4px;
          float: right;
          font-size: 12px;
          color: #999;
          text-align: center;
          font-weight: 400;
          &.deposit {
            border: 1px solid #e4b05a;
            color: #e4b05a;
          }
        }
      }
      .info {
        display: flex;
        margin-top: 12px;
        .title {
          // flex: 0 0 100px;
          color: #999999;
          font-size: 14px;
        }
        .text {
          flex: 1;
          text-align: right;
          font-size: 12px;
          &.highlight {
            color: #fa4e33;
          }
          .count {
            font-size: 16px;
          }
        }
      }
      .parameter {
        text-align: center;
        font-size: 14px;
        color: #333;
        .title {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
  .no-data {
    width: 100%;
    min-height: 495px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 18px;
    flex-direction: column;
    img{
      margin-bottom: 40px;
      opacity: .6;
    }
  }
}
</style>
